import React from 'react';
import { CheckIcon } from '@heroicons/react/24/solid';
import { cn } from '@/lib/utils';
import { ThemeColor, themeColorMap } from '@/hooks/use-theme';

interface ThemeSelectorProps {
  selectedColor?: ThemeColor;
  onChange?: (color: ThemeColor) => void;
  onColorChange?: (color: string, hoverColor: string) => void;
  className?: string;
  showLabels?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

export default function ThemeSelector({ 
  selectedColor, 
  onChange,
  onColorChange, 
  className,
  showLabels = false,
  size = 'md'
}: ThemeSelectorProps) {
  // 使用传入的selectedColor，如果没有传入则使用默认值
  const colorValue = selectedColor || 'blue';

  const handleColorSelect = (color: ThemeColor) => {
    // 调用新的onChange回调
    if (onChange) {
      onChange(color);
    }
    
    // 兼容旧的回调方式
    if (onColorChange) {
      const { color: primaryColor, hoverColor } = themeColorMap[color];
      onColorChange(primaryColor, hoverColor);
    }
  };

  // 根据尺寸确定样式
  const getSizeStyles = () => {
    switch(size) {
      case 'sm':
        return { 
          button: 'h-8',
          grid: 'gap-2',
          check: 'h-4 w-4'
        };
      case 'lg':
        return { 
          button: 'h-16',
          grid: 'gap-4',
          check: 'h-6 w-6'
        };
      case 'md':
      default:
        return { 
          button: 'h-12',
          grid: 'gap-3',
          check: 'h-5 w-5'
        };
    }
  };

  const sizeStyles = getSizeStyles();

  // 颜色标签映射
  const colorLabels: Record<ThemeColor, string> = {
    blue: '蓝色',
    purple: '紫色',
    green: '绿色',
    red: '红色',
    orange: '橙色',
    pink: '粉色'
  };

  return (
    <div className={cn("space-y-3", className)}>
      <div className={cn("grid grid-cols-3", sizeStyles.grid)}>
        {Object.entries(themeColorMap).map(([key, { color, gradient }]) => {
          const isSelected = colorValue === key;
          return (
            <button
              key={key}
              type="button"
              className={cn(
                `flex items-center justify-center p-2 rounded-md border transition-all ${sizeStyles.button}`,
                isSelected
                  ? `border-gray-400 ring-2 ring-offset-2 ring-${key}-500`
                  : "border-gray-200 hover:border-gray-300"
              )}
              style={{
                background: gradient || color,
              }}
              onClick={() => handleColorSelect(key as ThemeColor)}
              aria-label={`选择${colorLabels[key as ThemeColor]}主题`}
              title={colorLabels[key as ThemeColor]}
            >
              {isSelected && (
                <CheckIcon className={cn("text-white drop-shadow-md", sizeStyles.check)} />
              )}
              <span className="sr-only">{colorLabels[key as ThemeColor]}</span>
            </button>
          );
        })}
      </div>

      {showLabels && (
        <div className="grid grid-cols-3 gap-3 text-center text-xs">
          {Object.keys(themeColorMap).map((key) => (
            <div 
              key={`label-${key}`} 
              className={cn(
                "text-gray-600", 
                colorValue === key ? "font-medium text-[var(--primary-text-dark)]" : ""
              )}
            >
              {colorLabels[key as ThemeColor]}
            </div>
          ))}
        </div>
      )}
    </div>
  );
} 